<template>
  <div class="wrap">
    <header>
      <div class="header">
        <span @click="go">&lt;</span>
        <h3>消息</h3>
      </div>
    </header>
    <main>
      <div class="message1">
        <div @click="tohudong">
          <p>互动消息</p>
          <span>></span>
        </div>
        <div @click="toxitong">
          <p>系统消息</p>
          <span>></span>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    go() {
      this.$router.go(-1);
    },
    tohudong() {
      this.$router.push("/hudong");
    },
    toxitong() {
      this.$router.push("/xitong");
    }
  }
};
</script>

<style lang="scss">
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  background: rgb(72, 72, 225);
  .header {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    span {
      padding-left: 5%;
    }
    h3 {
      padding-left: 35%;
    }
  }
}
main {
  flex: 1;
  overflow-y: scroll;
  .message1 {
    margin: 10px 5%;
    width: 90%;
    height: 110px;
    background: #f1f1f1;
    div {
      padding: 5px;
      display: flex;
      line-height: 40px;
      background: #fff;
      margin: 5px 0;
      justify-content: space-between;
    }
  }
}
</style>